<template>
    <el-dialog
        v-loading="loading"
        :visible="visible"
        title="修改设置"
        :close-on-click-modal="false"
        :before-close="closeHandler"
        center
        width="500px"
    >
        <div>
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <i class="el-icon-lx-calendar"></i> 看板
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container">
                <div class="form-box">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="看板名称">
                            <el-input v-model="form.name" style="width:160px;"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                            <el-button @click="onCancel">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { create, getall, update } from '@/api/kanban.js';

export default {
    name: 'createKanban',
    props: {
        //是否可见
        visible: {
            type: Boolean,
            default: false
        },
        itemId: {
            type: String
        },
        itemName: {
            type: String
        }
    },

    data() {
        return {
            title: '修改',
            form: {
                name: this.itemName,
                id: this.itemId
            },
            rules: {
                name: [{ required: true, message: '请输入任务看板名称', trigger: 'blur' }]
            }
        };
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.itemId) {
                        update(this.form)
                            .then(rep => {
                                this.$message.success('更新成功');
                                this.$emit('on-save-click');
                            })
                            .catch(err => {
                                this.$message.error('err' + err);
                            });
                    } else {
                        create(this.form)
                            .then(rep => {
                                this.$message.success('创建成功');
                                this.$emit('on-save-click');
                            })
                            .catch(err => {
                                this.$message.error('err' + err);
                            });
                    }
                } else {
                    this.$message.error('请检查');
                }
            });
        },
        onCancel() {
            this.$emit('on-save-click');
        },
        closeHandler() {
            this.$emit('update:visible', false);
            this.$refs.form.resetFields();
        }
    },
    created() {
        if (this.itemId) {
            this.title = '修改';
        } else {
            this.title = '新增';
        }
    },
    beforeDestroy() {
        this.$emit('on-save-click');
        this.$parent.getData();
    },
    watch: {
        itemName: function(val) {
            this.form.name = val;
        }
    }
};
</script>